<template>
	<view>
		<view class="map">
			<map ref="map" id="map" style="width: 100%; height: 89vh" :scale="16" :latitude="latitude" :longitude="longitude"
				:show-compass="true" :show-location="true" @markertap="dpcdetail" :markers="covers">
			</map>
			<view class="dzinfo" v-show="show">
				<view class="item" @click="gotodetail(detail.id)">
					<view class="title">{{detail.title}}</view>
					<view class="desc">{{detail.address}}</view>
					<view class="txt">
						<view class="num">
							<text class="num-su" v-if="detail.czdata.kx_num>0">闲</text>
							<text class="num-fa" v-if="detail.czdata.kx_num==0">满</text>
							<text class="num-facc" v-if="detail.czdata.kx_num==0">空闲{{detail.czdata.kx_num}}个插座</text>
							<text class="num-succ" v-if="detail.czdata.kx_num>0">空闲{{detail.czdata.kx_num}}个插座</text>
							<text class="num-allcc">共{{detail.czdata.num}}个插座</text>
						</view>
						<view class="detail">去充电</view>
						<view class="clear"></view>
					</view>
					<view class="gotomap"><u-icon name="map-fill" color="#23BF61" size="20"></u-icon> <text>{{detail.juli}}km</text> </view>
				</view>
			</view>
			<view class="mylocation">
				<image src="../../static/location.png" mode="" @tap="dingwei"></image>
			</view>
			<com-map ref="commap" @myevent="setlocation"></com-map>
			<com-tabbar :currentTab="currentTab"></com-tabbar>
		</view>
	</view>
</template>

<script>
	let that
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				id: 0,
				latitude: '',
				longitude: '',
				covers: [],
				detail: [],
				currentTab: 'article'
			}
		},
		onShow() {
			this.show = false//点击地图弹框默认隐藏
			this.getlist()//初始化地图标点
		},
		mounted() {
			that = this
		},
		computed: {
			//引入store全局变量
			...mapState(['mylocation','mylocationState'])
		},
		methods: {
			//电站详情
			dpcdetail(e) {
				//触发标点事件
				this.covers.find(item => {
					that.show = true
					this.id = e.detail.markerId//赋值电站ID
				})
				//请求电站详情接口
				this.$http_api.dpcdetail({
					id: this.id,
					latitude:this.latitude,
					longitude:this.longitude
				}).then((res) => {
					that.detail = res
				})
			},
			getlist() {
				//判断定位状态
				if (!this.mylocationState) {
					//调取组件定位方法
					this.$refs.commap.setlocation()
					return
				}else{
					this.latitude = this.mylocation.latitude
					this.longitude = this.mylocation.longitude
				}
				//获取电站列表
				this.$http_api.dpclist({
					type: 1	//1：地图 2：推荐
				}).then((res) => {
					//给地图设置标点
					that.covers = res
				})
			},
			//跳转详情页
			gotodetail(id) {
				uni.navigateTo({
					url: "/pages/detail/detail-electromobile?id=" + id
				})
			},
			//点击定位到当前位置
			dingwei(){
				uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
					latitude: this.latitude,
					longitude: this.longitude,
				});
			},
			//子组件通过$emit给父组件传值，@myevent和$emit('myevent',###)里的myevent名称一致，e=子组件传过来的值
			setlocation(e){
				this.latitude = e.latitude
				this.longitude = e.longitude
				this.getlist()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.map {
		position: relative;
	}

	.dzinfo {
		position: absolute;
		bottom: 15%;
		background-color: #fff;
		width: 96%;
		left: 0;
		right: 0;
		margin: 0 auto;

		.item {
			// box-shadow:0px 0px 6px #dfdfdf;
			padding: 30rpx 20rpx;
			.gotomap{
				position: absolute;
				right: 20rpx;
				top: 35rpx;
				display: flex;
				font-size: 28rpx;
				color: #333;
				text{
					margin-left: 3px;
				}
			}
			.title {
				font-size: 34rpx;
				font-weight: bold;
			}

			.desc {
				font-size: 30rpx;
				color: #333;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
			}

			.txt {
				font-size: 26rpx;

				.num {
					float: left;
					margin-top: 6rpx;

					.num-su {
						padding: 4rpx 8rpx;
						background: #23BF61;
						color: #fff;
						border-radius: 6rpx;
						margin-right: 15rpx;
					}

					.num-fa {
						padding: 4rpx 8rpx;
						background: #f10000;
						color: #fff;
						border-radius: 6rpx;
						margin-right: 15rpx;
					}

					.num-succ {
						color: #23BF61;
					}

					.num-facc {
						color: #f10000;
					}

					.num-allcc {
						margin-left: 15rpx;
						padding-left: 15rpx;
						border-left: 1px solid #999;
					}
				}

				.detail {
					font-size: 28rpx;
					color: #23BF61;
					border: 1px solid #23BF61;
					border-radius: 40rpx;
					width: 130rpx;
					text-align: center;
					line-height: 46rpx;
					float: right;
				}
			}
		}
	}

	.mylocation {
		position: absolute;
		right: 2%;
		bottom: 40%;

		image {
			width: 70rpx;
			height: 70rpx;
			padding: 5px;
			background-color: #fff;
			border-radius: 100%;
		}
	}
</style>